/**
 * 学习目标：this指向问题以及处理办法
 * 处理办法：1、在render方法中，this指向正确，使用箭头函数可以获得render的this
 * 2、使用实例方法，箭头函数会将this自动指向实例对象本身
 * 注意：react自带结构体，this指向可以正常指向组件实例
 * 非自带结构体this指向undefined
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        {/* 第一种方法render方法中使用箭头函数 */}
        {/* <button onClick={() => this.handel()}>点击打印</button> */}
        <button onClick={this.handel}>点我打印count</button>
      </div>
    );
  }

  handelClick() {
    console.log('this  ----->  ', this.state.count);
  }

  // 第二种方法，在实例函数使用箭头函数
  handel = () => {
    console.log('this  ----->  ', this.state.count);
  };
}

ReactDOM.render(<App></App>, document.getElementById('root'));
